/**
 * Imports :
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/**
 * Import grid settings :
 * This to be able to use gridle mixins, etc...
 */
.gridle-debug #myCoolItem, #myCoolItem.gridle-debug {
  background-size: 50px 90%;
  background-position: 0 50%;
  background-repeat: repeat-x;
}

#myCoolItem {
  position: relative;
}

.gridle-debug #myCoolItem, #myCoolItem.gridle-debug {
  background-color: #daeff5;
}
.gridle-debug #myCoolItem:before, #myCoolItem.gridle-debug:before, .gridle-debug #myCoolItem:after, #myCoolItem.gridle-debug:after {
  content: "";
  display: block;
  background-image: url();
  margin: 10px 0;
  padding: 5px 0;
  text-align: center;
  color: white;
  font-size: 11px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block !important;
}

#myCoolItem {
  display: inline-block;
  min-height: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/**
 * Str replace
 *
 * @param {string}  $string    String that you want to replace
 * @param {string}  $substr    String that is to be replaced by `$newsubstr`
 * @param {string}  $newsubstr String that replaces `$substr`
 * @param {number*} $all       Flag for replaceing all (1+) or not (0)
 * @return {string}
 */
/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Medias :
 */
ul#medias {
  background: black;
  text-align: center;
  margin-bottom: 30px;
}
ul#medias li {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  margin: 0;
}
ul#medias li.active, ul#medias li:hover {
  background: white;
  color: black;
}
html.default ul#medias {
  display: none;
}
@media screen and (max-width: 620px) {
  ul#medias {
    display: none;
  }
}

/**
 * Basic formatting :
 */
html {
  font: 11px/1.5 'Helvetica Neue', Verdana, sans-serif;
}

html.mobile body {
  text-align: center;
}
@media screen and (max-width: 480px) {
  body {
    text-align: center;
  }
}
html.tablet body {
  text-align: center;
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
  body {
    text-align: center;
  }
}
html.ipad-landscape body {
  font-size: 16px;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  body {
    font-size: 16px;
  }
}

/**
 * Gridle set sample :
 */
#myCoolItem {
  float: left;
  direction: ltr;
  padding-left: 10px;
  padding-right: 10px;
  width: 66.66667%;
  left: 16.66667%;
}
html.default #myCoolItem {
  float: left;
  direction: ltr;
  padding-left: 10px;
  padding-right: 10px;
}
html.ipad-landscape #myCoolItem {
  padding-left: 0;
  padding-right: 0;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  #myCoolItem {
    padding-left: 0;
    padding-right: 0;
  }
}
html.default #myCoolItem {
  width: 66.66667%;
}
.gridle-debug html.default #myCoolItem:before, html.default #myCoolItem.gridle-debug:before {
  content: "grid-default-8";
}
.gridle-debug html.default #myCoolItem.parent:before, html.default #myCoolItem.gridle-debug.parent:before {
  content: "grid-parent-default-8";
}
.gridle-debug #myCoolItem:before, #myCoolItem.gridle-debug:before {
  content: "grid-default-8";
}
.gridle-debug #myCoolItem.parent:before, #myCoolItem.gridle-debug.parent:before {
  content: "grid-parent-default-8";
}
.gridle-debug #myCoolItem, #myCoolItem.gridle-debug {
  background-color: #f4efdf !important;
}
html.default #myCoolItem {
  left: 16.66667%;
}
.gridle-debug html.default #myCoolItem:after, html.default #myCoolItem.gridle-debug:after {
  content: "push-default-2";
}
.gridle-debug #myCoolItem:after, #myCoolItem.gridle-debug:after {
  content: "push-default-2";
}
html.tablet #myCoolItem {
  width: 100%;
}
.gridle-debug html.tablet #myCoolItem:before, html.tablet #myCoolItem.gridle-debug:before {
  content: "grid-tablet-12" !important;
}
.gridle-debug html.tablet #myCoolItem.parent:before, html.tablet #myCoolItem.gridle-debug.parent:before {
  content: "grid-parent-tablet-12" !important;
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
  #myCoolItem {
    width: 100%;
  }
  .gridle-debug #myCoolItem:before, #myCoolItem.gridle-debug:before {
    content: "grid-tablet-12" !important;
  }
  .gridle-debug #myCoolItem.parent:before, #myCoolItem.gridle-debug.parent:before {
    content: "grid-parent-tablet-12" !important;
  }
}
.gridle-debug #myCoolItem, #myCoolItem.gridle-debug {
  background-color: #f4efdf !important;
}
html.tablet #myCoolItem {
  left: 0%;
}
.gridle-debug html.tablet #myCoolItem:after, html.tablet #myCoolItem.gridle-debug:after {
  content: "push-tablet-0" !important;
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
  #myCoolItem {
    left: 0%;
  }
  .gridle-debug #myCoolItem:after, #myCoolItem.gridle-debug:after {
    content: "push-tablet-0" !important;
  }
}
html.mobile #myCoolItem {
  visibility: hidden;
}
@media screen and (max-width: 480px) {
  #myCoolItem {
    visibility: hidden;
  }
}
